<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>富乐万家注册</title>
    <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
    <script type="text/javascript">
      var left = window.localStorage.getItem("left")
        ? window.localStorage.getItem("left")
        : 60;
      var leftsetInterval;
      let registerLock = true; //注册防重复提交

      var baseUrl = "http://192.168.0.117:8089";
      var baseUrl = "https://api.fulewanjia.com/fulewanjia";
      $(function () {
        var inviteCode = decodeURI(window.location.href.split("?")[1]);
        var code = "";
        var urlParam = inviteCode.split("&")[0];
        $("#parentUserName").text(urlParam);
        // 验证码
        var time = 120;
        $("#mobile").on("input", function () {
          code = "";
        });
        $("#vcode").click(function () {
          var phone = $("#mobile").val();
          if (!/^1[3456789]\d{9}$/.test(phone)) {
            $("#toast").text("手机号不为空！");
            $("#toast").fadeIn().delay(1000).fadeOut();
            return;
          }
          if ($(this).hasClass("disabled")) {
            return;
          }
          $("#vcode").addClass("disabled");
          $("#vcode").text("倒计时 " + time);
          if (time == 120) {
            $.ajax({
              url: `${baseUrl}/ws/sendSms/${phone}`, //获取验证码
              success: function (data) {
                code = data.data;
              },
            });
          }
          var timer = setInterval(function () {
            time--;
            $("#vcode").text("倒计时 " + time);
            if (time == 0) {
              $("#vcode").text("发送验证码 ");
              clearInterval(timer);
              $("#vcode").removeClass("disabled ");
              time = 120;
            }
          }, 1000);
        });
        //立即下载事件绑定
        $(".onload").click(function () {
          var mobile = $("#mobile").val();
          var codeinput = $("#code").val();
          let passWord = $("#passWord").val();
          let payPassword = $("#payPassword").val();

          let confimPassWord = $("#confimPassWord").val();

          if (!mobile) {
            $("#toast").text("手机号不为空！");
            $("#toast").fadeIn().delay(1000).fadeOut();
            return;
          }
          if (!/^1[0-9]{10}$/.test(mobile)) {
            $("#toast").text("手机号不正确！");
            $("#toast").fadeIn().delay(1000).fadeOut();
            return;
          }
          if (!codeinput) {
            $("#toast").text("验证码不为空！");
            $("#toast").fadeIn().delay(1000).fadeOut();
            return;
          }
          if (!code) {
            $("#toast").text("请重新获取验证码!");
            $("#toast").fadeIn().delay(1000).fadeOut();
            return;
          }
          if (!passWord) {
            $("#toast").text("密码不能为空");
            $("#toast").fadeIn().delay(1000).fadeOut();
            return;
          }
          if (!payPassword) {
            $("#toast").text("初始支付密码不能为空");
            $("#toast").fadeIn().delay(1000).fadeOut();
            return;
          }

          if (passWord != confimPassWord) {
            $("#toast").text("俩次密码输入不一致");
            $("#toast").fadeIn().delay(1000).fadeOut();
            return;
          }
          if (registerLock) {
            var param = {};
            param.username = mobile;
            param.password = passWord;
            param.payPassword = payPassword;
            param.inviteCode = urlParam;
            param.uuid = code;
            param.code = codeinput;
            registerLock = false;
            $("#toast").text("注册中...");
            $.ajax({
              url: `${baseUrl}/ws/appUser/logon`, //注册
              data: JSON.stringify(param),
              dataType: "JSON",
              headers: {
                "Content-Type": "application/json",
              },
              type: "POST",
              success: function (data) {
                registerLock = true;
                $("#toast").text(data.msg);
                $("#toast").fadeIn().delay(1000).fadeOut();
                // 跳转下载页面
                setTimeout(() => {
                  location.href = "guide.html";
                }, 1500);
              },
              error: function () {
                registerLock = true;
              },
            });
          }
        });
      });

      function hasApp() {
        location.href = "guide.html";
      }
    </script>
    <style>
      html,
      body {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }

      .form-content {
        background: #fff;
        padding-top: 10px;
        border-radius: 35px 35px 0 0;
        margin-top: 50px;
      }

      input::-webkit-input-placeholder {
        font-size: 28px;
        width: 200px;
        background-color: transparent !important;
      }

      .head {
        display: flex;
        width: 100%;
        font-size: 40px;
        color: #ffffff;
      }

      .nav-bg {
        background-image: url("./images/indexbg.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: fixed;
        left: 0;
        top: 0;
        z-index: -1;
        width: 100%;
        height: 58rem;
      }

      .title {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding-top: 80px;
      }

      .contcent {
        font-size: 36px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }

      .contcent input {
        border: none;
        font-size: 36px;
        width: 360px;
        height: 50px;
        outline: none;
        background-color: transparent;
      }

      .centerbg {
        width: 100%;
        height: 30px;
        background-color: #efefef;
        margin-top: 30px;
      }

      .contyzm {
        display: flex;
        justify-content: space-between;
        border-bottom: 0.5px solid #999;
      }

      .getyzm {
        margin-left: 30px;
        width: 210px;
        padding: 10px 0;
        border-radius: 10px;
        background: linear-gradient(180deg, #ff561d 33%, #ff0064 100%);
        color: #fff;
        text-align: center;
      }

      .onload {
        margin: 0 auto;
        width: 90%;
        line-height: 100px;
        font-size: 36px;
        text-align: center;
        background: linear-gradient(180deg, #ff561d 33%, #ff0064 100%);
        color: #ffffff;
        margin-top: 30%;
        border-radius: 20px;
      }

      #toast {
        display: none;
        position: fixed;
        top: 40%;
        left: 50%;
        margin-top: -20px;
        margin-left: -175px;
        width: 350px;
        line-height: 80px;
        border-radius: 10px;
        background: #353535;
        text-align: center;
        font-size: 36px;
        color: #fff;
      }

      .zhuce {
        color: #49af5b;
        margin: 50px 50px 50px 50px;
        font-size: 64px;
        font-weight: bold;
        position: relative;
        background-image: linear-gradient(
          to bottom,
          #ff561d,
          #ff0064
        ); /* 从左到右的红色至黄色线性渐变 */
        background-clip: text;
        -webkit-background-clip: text; /* Safari/Chrome特定样式，将渐变应用于文字区域 */
        -webkit-text-fill-color: transparent; /* Safari/Chrome特定样式，透明化文字内容 */
      }

      input::-webkit-input-placeholder,
      textarea::-webkit-input-placeholder {
        color: #999;
        font-size: 36px;
        width: 100%;
      }

      input:-moz-placeholder,
      textarea:-moz-placeholder {
        color: #999;
        font-size: 36px;
        width: 100%;
      }

      input::-moz-placeholder,
      textarea::-moz-placeholder {
        color: #999;
        font-size: 36px;
        width: 100%;
      }

      input:-ms-input-placeholder,
      textarea:-ms-input-placeholder {
        color: #999;
        font-size: 36px;
        width: 100%;
      }
    </style>
  </head>

  <body>
    <div id="result"></div>
    <div id="toast"></div>

    <div class="head">
      <div class="content" style="width: 100%; height: 100%">
        <div class="nav-bg"></div>
        <div class="title">
          <div style="margin: 0px 0">
            <img
              src="./images/logo.png"
              style="width: 160px"
              id="parentImg"
              alt=""
            />
          </div>
          <div style="font-size: 36px; color: #fff; margin-top: 20px">
            <span>推荐人邀请码：</span><span id="parentUserName"></span>
          </div>
        </div>

        <div class="form-content">
          <div class="zhuce" style="margin-top: 160px">欢迎注册</div>
          <div class="contcent">
            <div style="width: 90%">
              <div
                style="
                  display: flex;
                  align-items: center;
                  border-bottom: 0.5px solid #999;
                "
              >
                <p>
                  <input
                    size="28"
                    type="text"
                    id="mobile"
                    placeholder="请输入手机号"
                  />
                </p>
              </div>

              <div
                class=""
                style="
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  border-bottom: 0.5px solid #999;
                  margin-top: 20px;
                "
              >
                <div style="display: flex; align-items: center">
                  <p>
                    <input
                      size="28"
                      type="text"
                      id="code"
                      placeholder="请输入验证码"
                    />
                  </p>
                </div>
                <p class="getyzm" id="vcode">获取验证码</p>
              </div>

              <div
                style="
                  display: flex;
                  align-items: center;
                  border-bottom: 0.5px solid #999;
                "
              >
                <p>
                  <input
                    size="28"
                    type="number"
                    id="payPassword"
                    placeholder="请设置初始支付密码"
                    oninput="if(value.length > 6)value=value.slice(0,6)"
                  />
                </p>
              </div>

              <div
                style="
                  display: flex;
                  align-items: center;
                  border-bottom: 0.5px solid #999;
                "
              >
                <p>
                  <input
                    size="28"
                    type="password"
                    id="passWord"
                    placeholder="请输入登录密码"
                  />
                </p>
              </div>

              <div
                style="
                  display: flex;
                  align-items: center;
                  border-bottom: 0.5px solid #999;
                "
              >
                <p>
                  <input
                    size="28"
                    type="password"
                    id="confimPassWord"
                    placeholder="请再次确认登录密码"
                  />
                </p>
              </div>
            </div>
          </div>
          <div class="onload">立即注册</div>
          <div
            onclick="hasApp()"
            style="
              color: #ff0064;
              margin-top: 40px;
              text-align: center;
              font-size: 40px;
            "
          >
            已有账号直接下载app
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
